<!-- 
  前端工程的复杂化
  1、目录结构组织划分
  2、管理文件之间的依赖
  3、管理第三方模块的依赖
  4、项目发布前如何压缩、打包项目



  编程中的脚手架----快速生成项目的工程化结构
  每个项目作出完成的效果不同，但使用它们的基本工程化结构相似
  不同的项目，在这个模板的基础上进行项目开发或者进行一些简单的配置修改即可


  VUE的脚手架： vue-cli
  Angular脚手架： angular-cli
  React脚手架：create-react-app


  上述脚手架都是使用node编写的，并且都是基于webpack，因而电脑上必须安装node环境


  node安装
  LTS  长期维护，较稳定   current 最新版
  同时会安装npm  
  node --version   查看版本
  npm --version

  yarn由FaceBook Gooogle Exponent和Tilde联合推出一个新的JS包管理工具 --弥补早期npm的缺陷
  React脚手架默认使用的也是yarn
  安装yarn  npm install -g yarn


                                yarn和npm命令对比


  npm install                                         yarn install
  npm install [package]                               yarn add [package]
  npm install --save [package]                        yarn add [package]
  npm install --save-dev [package]                    yarn add [package][--dev/-D]
  npm rebuild                                         yarn install --force
  npm uninstall [package]                             yarn remove [package]
  npm uninstall --save [package]                      yarn remove [package]
  npm uninstall --save-dev [package]                  yarn remove [package]
  npm cache clean                                     yarn cache clean
  rm -rf node_modules && npm install                  yarn upgrade


  安装cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org

  安装React项目脚手架
  npm install -g create-react-app


  创建项目：
  create-react-app 项目名称（小写 短横连接  不能含大写字母）  cd进入目录  yarn start运行项目

  目录结构：
  node_modules  项目依赖的东西  npm、yarn管理
  public
    favicon.ico 图标
    index.html  项目入口
    manifest.json  实现PWA的安装和离线功能
    robots.txt  设置爬虫规则，哪些可以被爬
  src----写源代码
    App.css  
    App.js  函数式组件定义的App
    App.test.js  测试
    index.css
    index.js  react代码入口文件
    reportWebVitals.js/serviceWorker.js  实现PWA的安装和离线功能
    setupTest.js  测试初始化

  .gitignore  源代码管理工具  git的忽略文件
  package.json  项目管理的配置文件，依赖的库，项目名称、版本号，不主动修改该文件
    devDependencies  项目依赖
    scripts  
    browserslist  浏览器配置  适配
    yarn.lock package-lock.json   记录的真实版本依赖   ^可小版本更新



  webpack
  现代JavaScript应用程序的静态模块打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
  react-scripts eject   暴露webpack的文件


 -->